<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 
    main.js
      vue3.0 升级，就是为了用 typescript 重写vue，因为typescript的迭代更好，更适合大型项目
      1、2.0有全局的对象 Vue，3.0改用 const app = createApp(App) 创建实例，少了数据污染问题，但组件挂载都需要在创建实例后
          统一执行，而且createApp有内置生命周期
      2、全局变量绑定不再使用Protype，而是通过这样绑定 app.config.globalProperties.$moment = moment
      3、slot插槽做了统一， <a-menu slot="overlay"> 弃用了，改为 <template #overlay></template>
      4、data弃用对象形式，只是用函数形式
      5、使用 typescript 语言， 他是微软推出的JavaScript的超集，变量啥的需要明确数据类型
          当中语法的详细区别，还是看 typescript 文档吧
      6、step(props, context) 代替 data， 他在  props解析之后，beforeCreate 执行之前调用
          他触发在data之前，所以this为初始化，data methods都取不到
          他减少了变量监听的地方，只有需要反馈到UI的变量才会输出
          感觉就是完全新写了一套，和react之前类组价一样的写法。但是现在setup和data都兼容而已
      7、defineComponent 创建组件，他对step做了封装，支持了这个语法
      8、 关于setup 尤雨溪给的最好的文档
          https://zhuanlan.zhihu.com/p/68477600
          最新的组合api文档
          https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api
          props: {
            options: (null as any) as PropType<{ msg: string }>   // { msg: string }
          },
            const str = ref('aa');
            const count = ref(0);
            const obj = reactive({ name: '张三', age: 15})
            const countPlusOne = computed(() => count.value + 1)
            watch(() => props.id, async (id) => {
              data.value = await fetchData(id)
            })
            watch(count, value => {
              console.log('double the count is: ', value)
            })

            const getUserRepositories = async () => {
              repositories = await fetchUserRepositories(props.user)
            }


            const chnageStr = (d) => {
              console.log(d)
              str.value = d+'b'
            }
            return {
              msg,
              chnageStr
            }

            ref 包装响应式对象，自动延展 .value属性， 所以通常定义数值等简单类型
            reactive 声明响应式对象，通常定义 对象、数组等复杂类型
            computed 计算属性，效果和以前一样，依赖变化，重新计算，注意返回值是只读的，不能再修改
            watch  初始化就会执行一次
   -->
</body>
</html>